<template>
  <div class="">
    <div class="filter-container">
      <el-input v-model="listQuery.userName" clearable class="filter-item" style="width: 200px;" placeholder="请输入管理员名称"/>
      <el-button v-permission="['admin:list']" class="filter-item" type="primary" icon="el-icon-search" @click="search">查找</el-button>
      <el-button v-permission="['admin:add']" class="filter-item" type="primary" icon="el-icon-edit" @click="showAdd">添加</el-button>
    </div>

    <el-table v-loading="listLoading" :data="list" size="small" element-loading-text="正在查询中..." border fit highlight-current-row>
      <el-table-column align="center" label="管理员ID" prop="id" />
      <el-table-column align="center" label="登录名" prop="userName"/>
      <el-table-column align="center" label="管理员名称" prop="realName" />
      <el-table-column align="center" label="手机号码" prop="phone" />
      <el-table-column align="center" label="管理员角色" prop="roles">
        <template slot-scope="scope">
          <el-tag v-for="role in scope.row.roles" :key="role" type="primary" style="margin-right: 20px;">{{ role }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-permission="['admin:detail']" type="primary" size="mini" @click="showEdit(scope.row)">编辑</el-button>
          <el-button v-permission="['admin:delete']" type="danger" size="mini" @click="remove(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-permission="['admin:list']" v-show="total>0" :total="total" :page.sync="listQuery.pageNo" :limit.sync="listQuery.pageSize" @pagination="initTable"/>

    <el-dialog :close-on-click-modal="false" :title="isAdd?'新增管理员':'编辑管理员'" :visible.sync="dialogFormVisible" @open="loadRoles">
      <el-form ref="dataForm" :rules="rules" :model="dataForm" status-icon label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
        <el-form-item label="登录名" prop="userName">
          <el-input :disabled="!isAdd" v-model="dataForm.userName" />
        </el-form-item>
        <el-form-item :hidden="!isAdd" label="密码" prop="password">
          <el-input v-model="dataForm.password" type="password" auto-complete="off" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="dataForm.phone" />
        </el-form-item>
        <el-form-item label="真实姓名" prop="realName">
          <el-input v-model="dataForm.realName" />
        </el-form-item>
        <el-form-item label="授权角色" prop="roleIds">
          <el-select v-model="dataForm.roleIds" multiple placeholder="请选择">
            <el-option v-for="item in roles" :key="item.id" :label="item.name" :value="item.id"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button v-permission="['admin:add']" v-if="isAdd" type="primary" @click="add">确定</el-button>
        <el-button v-permission="['admin:edit']" v-else type="primary" @click="edit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { AdminService, RoleService } from '@/api/AdminService'
import { uploadPath } from '@/api/CommonService'
import Pagination from '@/components/Pagination'
import Notify from '@/utils/notify'

export default {
  name: 'Admin',
  components: { Pagination },
  data() {
    return {
      uploadPath, list: null, total: 0, roles: null, listLoading: true,
      listQuery: { pageNo: 1, pageSize: 20, userName: undefined },
      dataForm: { id: undefined, userName: undefined, password: undefined, roleIds: [] },
      dialogFormVisible: false, isAdd: true,
      rules: {
        userName: [{ required: true, message: '管理员名称不能为空', trigger: 'blur' }],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
        phone: [{ required: true, message: '手机号不能为空', trigger: 'blur' }],
        realName: [{ required: true, message: '真实姓名不能为空', trigger: 'blur' }],
        roleIds: [{ required: true, message: '请选择角色', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.initTable()
  },
  methods: {
    initTable() {
      this.listLoading = true
      AdminService.listAdmin(this.listQuery).then(result => {
        this.list = result.data
        this.total = result.totalCount
        this.listLoading = false
      })
    },
    search() {
      this.listQuery.page = 1
      this.initTable()
    },
    resetForm() {
      this.dataForm = { id: undefined, userName: undefined, password: undefined, roleIds: [] }
    },
    showAdd() {
      this.isAdd = true
      this.resetForm()
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    add() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          AdminService.addAdmin(this.dataForm)
            .then(() => {
              this.dialogFormVisible = false
              Notify.success(this, '添加成功!')
              this.initTable()
            })
        }
      })
    },
    showEdit(row) {
      this.isAdd = false
      this.dataForm = Object.assign({}, row)
      this.dialogFormVisible = true
      this.dataForm.password = '******'
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    edit() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          AdminService.editAdmin(this.dataForm)
            .then(() => {
              this.dialogFormVisible = false
              Notify.success(this, '更新成功!')
              this.initTable()
            })
        }
      })
    },
    remove(row) {
      this.$confirm('您确认要删除该' + row.userName + '管理员?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
        AdminService.deleteAdmin(row.id)
          .then(() => {
            Notify.success(this, '删除成功!')
            this.initTable()
          })
      })
    },
    loadRoles() {
      RoleService.listRoleNames().then(result => {
        this.roles = result
      })
    }
  }
}
</script>
